<!--
 * @Author: lmk
 * @Date: 2021-12-07 09:44:43
 * @LastEditTime: 2021-12-16 11:36:43
 * @LastEditors: lmk
 * @Description: 展会日历
-->
<template>
	<view :class="currentTheme">
		<a-nabbar name="展会日历" @getNavHeight="getNavHeight" />
		<view class="u-flex sticky-tabs  u-padding-left-32 u-padding-right-32" :style="{top:top}">
			<view class="u-flex-1">
				<me-tabs v-model="indexCurrent" :height="88" :tabs="tabs" @change="tabGetChange" activeColor="#765CFE"
					@tabTop="getTabTop"></me-tabs>
			</view>
		</view>
		<swiper :indicator-dots="false" :autoplay="false" :style="swiperStyle" :duration="300" :current="tabIndex"
			@change="getChange">
			<swiper-item>
				<mescroll-item :navHeight="navHeight" id="scroll-view"></mescroll-item>
			</swiper-item>
			<swiper-item>
				<ExhibitionList></ExhibitionList>
			</swiper-item>
		</swiper>
	</view>
</template>

<script>
	import pageMixins from '@/pages/pageMixins.js'
	import swiperListMixin from '@/mixins/swiperList.js'
	import MescrollItem from "./components/muItem.vue";
	import ExhibitionList from './components/exhibitionList'
	export default {
		mixins: [pageMixins, swiperListMixin],
		data() {
			return {
				tabs: [{
					name: '日历'
				}, {
					name: '列表'
				}],
				navHeight: 0,
			}
		},
		computed: {
			// isFilterFlag(){
			// 	return this.tabIndex===0 && this.indexCurrent===0
			// }
		},
		components: {
			MescrollItem,
			ExhibitionList
		},
		onLoad(option) {
			this.currentMonth = new Date().getMonth() + 1
			this.handleScroll()
		},
		methods: {
			getChange(e) {
				const index = e.detail ? e.detail.current : e;
				if (e.hasOwnProperty('detail') && e.detail.source == 'touch') {
					this.indexCurrent = index //切换选项卡样式
					console.log(e, 66)
				}
				this.otherHeight = this.isFilterFlag ? '0rpx' : '152rpx'
			},
			getNavHeight(res) {
				this.navHeight = res.navbarHeight + res.statusBarHeight + uni.upx2px(88) // 导航栏高度加tab高度
			},
			handleScroll() {
				//微信api 监听指定元素在不在可视区域
				this.observerObj = wx.createIntersectionObserver().relativeToViewport();
				console.log('listen ' + this.currentMonth);
				// 监听目标视频跟viewport相交区域的变化 
				this.observerObj.observe(`#scroll-view>>>#month-${this.currentMonth}`, res => {
					// 因为跨组件层级太多了所以直接用emit通知
					uni.$emit('scrollViewListen',res && res.intersectionRatio>0) //大于0就是在可视区域
				});
			},
		},
	}
</script>

<style lang="scss" scoped>
	.addlarp-btn-box {
		padding: 0 283rpx;
	}

	.page-title {
		&::after {
			content: '';
			display: block;
			height: 4rpx;
			width: 320rpx;
			margin: 27rpx auto;
			background-color: $primary;
		}
	}

	.right-search {
		width: 30.5vw;
		position: relative;

		&::before {
			content: "";
			position: absolute;
			width: 1rpx;
			height: 29rpx;
			border-left: 1rpx solid var(--line-color);
			top: 50%;
			left: 0;
			margin-top: -15rpx;
		}
	}

	.pop-title {
		line-height: 104rpx;
	}

	.search-item-title {
		margin-bottom: 48rpx;
	}

	.search-container {
		width: 365rpx;
		margin: 0 auto 64rpx;
	}

	.search-box-btns {
		margin-bottom: 60rpx;

		.search-btn {
			height: 88rpx;
			line-height: 88rpx;
			text-align: center;
		}

		.reset-btn {
			background: var(--background-second-color);
			border-radius: 44rpx 0 0 44rpx;
		}

		.confirm-btn {
			background: var(--theme-color);
			border-radius: 0 44rpx 44rpx 0;
		}
	}
</style>
